<!-- 
  @name: 支付成功
  @date: 2020.1.7
 -->
<template>
	<view class="content">
		<!-- 提示 -->
		<view class="tip">
			<!-- 对号 -->
			<view class="img"></view>
			<!-- 金额 -->
			<view class="amount">
				<text class="icon">￥</text>
				<text class="num">{{info.payMoney}}</text>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order">
			<view class="item">
				<text class="left">订单编号：</text><text>{{info.rechargeCode}}</text>
			</view>
			<view class="item">
				<text class="left">付款账号：</text><text>{{info.payAccount}}</text>
			</view>
			<view class="item">
				<text class="left">付款方式：</text><text>微信支付</text>
			</view>
			<view class="item">
				<text class="left">付款时间：</text><text>{{info.payTime}}</text>
			</view>
		</view>
		
		<!-- 按钮 -->
		<button class="btn_submit" @tap="goAcc">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},  //订单信息
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			//返回我的账户页面
			goAcc() {
				//函数返回层级与onUnLoad中的返回层级之和，为实际返回层级
				uni.navigateBack({
					delta: 1
				});
			},
			//获取订单信息
			getInfo() {
				uni.$emit('chargeSuccess');
				this.info = JSON.parse(this.$store.state.tmpData);
				this.$store.commit('setTmpData', '');
			}
		}
	}
</script>

<style lang="scss">
	/* 提示区 */
	.tip {
		width: 750rpx;
		padding-top: 70rpx;
		padding-bottom: 40rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 对号 */ 
		.img {
			width: 117rpx;
			height: 117rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14UWr6AVxLrAAAXY8YGD0g523.png');
		}
		/* 金额 */
		.amount {
			margin-top: 60rpx;
			.icon {
				font-size: 40rpx;
				font-weight: bold;
			}
			.num {
				font-size: 72rpx;
				font-family: $font-family-num;
				font-weight: 500;
				margin-left: 6rpx;
			}
		}
	}
	
	/* 订单信息 */
	.order {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 35rpx 30rpx;
		padding-top: 0;
		background-color: $color-white;
		.item {
			display: flex;
			flex-direction: row;
			margin-top: 35rpx;
			color: $color-grey-dark;
			.left {
				flex: 1;
			}
		}
	}
	
	/* 按钮 */
	.btn_submit {
		margin-top: 218rpx;
	}
</style>
